<template>
	<view>
		<view class="page_title">
		  <nav-back></nav-back>
		  <view class="page_name">诚信认证</view>
		  <view class="blank"></view>
		</view>
		
		<view class="banxin">
		  <view class="auths">
		    <view class="auth">
		      <view class="info">
		        <image src="/static/img/name.png" mode=""/>
		        实名认证
		      </view>
		      <view class='next' :class="nameStatus==0?'complete':'pending'" @click="handleName">
		        {{nameStatus==0?'已认证':'待认证'}} >
		      </view>
		    </view>
		    <view class="auth">
		      <view class="info">
		        <image src="/static/img/single.png" mode=""/>
		        单身承诺 
		      </view>
		      <view class='next'  :class="singleStatus==0?'complete':(singleStatus==1?'pending':(singleStatus==2?'examine':'nopass'))" @click="handleSingle">
		        {{singleStatus==0?'已通过':(singleStatus==1?'待签署':(singleStatus==2?'审核中':'未通过'))}} >
		      </view>
		    </view>
		    <view class="auth">
		      <view class="info">
		        <image src="/static/img/education.png" mode=""/>
		        学历认证
		      </view>
		      <view class='next' :class="educationStatus==0?'complete':(educationStatus==1?'pending':(educationStatus==2?'examine':'nopass'))" @click="handleEducation">
		        {{educationStatus==0?'已通过':(educationStatus==1?'待认证':(educationStatus==2?'审核中':'未通过'))}} >
		      </view>
		    </view>
		    <view class="auth">
		      <view class="info">
		        <image src="/static/img/house.png" mode=""/>
		        房产认证
		      </view>
		      <view class='next' :class="houseStatus==0?'complete':(houseStatus==1?'pending':(houseStatus==2?'examine':'nopass'))" @click="handleHouse">
		        {{houseStatus==0?'已通过':(houseStatus==1?'待认证':(houseStatus==2?'审核中':'未通过'))}} >
		      </view>
		    </view>
		  </view>
		</view>
	</view>
</template>

<script>
	import request from '@/utils/request.js'
	import NavBack from '@/components/NavBack.vue'
	
	export default {
		components: {
			NavBack
		},
		data() {
			return {
				nameStatus:0,
				singleStatus:0,
				educationStatus:0,
				houseStatus:0,
				authentication:{}
			};
		},
		onShow() {
			this.initAuth()
		  },
		methods:{
			initAuth(){
				let that = this
				request(`/employee/${uni.getStorageSync('id')}`).then((res)=>{
				  let authentication = res.data.data.authentication
				  console.log(authentication,'authentication');
				  this.nameStatus = authentication.realNameStatus
				  this.singleStatus = authentication.singleStatus
				  this.educationStatus = authentication.educationStatus
				  this.houseStatus = authentication.buildingStatus
				  this.authentication = authentication
				})
			},
			handleName(e){
			    uni.navigateTo({
			      url: '/pages/userAuth/realName/realName'
			    })
			  },
			  handleSingle(){
			    if(this.nameStatus==1){
			      uni.showToast({
			        title:  '请先完成实名认证',
			        icon: 'none',
			        duration: 2000
			      })
			      return
			    }
			    uni.navigateTo({
			      url: '/pages/userAuth/singleAuth/singleAuth'
			    })
			  },
			  handleEducation(){
			    if(this.nameStatus==1){
			      uni.showToast({
			        title:  '请先完成实名认证',
			        icon: 'none',
			        duration: 2000
			      })
			      return
			    }
			    uni.navigateTo({
			      url: '/pages/userAuth/educationAuth/educationAuth'
			    })
			  },
			  handleHouse(){
			    if(this.nameStatus==1){
			      uni.showToast({
			        title:  '请先完成实名认证',
			        icon: 'none',
			        duration: 2000
			      })
			      return
			    }
			    uni.navigateTo({
			      url: '/pages/userAuth/houseAuth/houseAuth'
			    })
			  },
		}
	}
</script>

<style lang="scss">

.auths{
  margin-top: 30rpx;
  .auth{
    display: flex;
    align-items: center;
    justify-content: space-between;
    .info{
      display: flex;
      align-items: center;
    }
    image{
      width: 48rpx;
      height: 48rpx;
      margin: 30rpx 0;
      margin-right: 20rpx;
    }
  }
  .next{
    font-size: 24rpx;
    font-weight: 500;
    padding:10rpx 20rpx;
    border-radius: 100rpx;
    float: right;
    text-align: end;
  }
  .complete{
    color: rgba(165, 214, 63, 1);
    background-color: rgba(165, 214, 63, 0.19);
  }
  .pending{
    color: rgba(166, 166, 166, 1);
    background-color: rgba(229, 229, 229, 0.64);
  }
  .examine{
    color: rgba(255, 141, 26, 1);
    background-color: rgba(255, 241, 231, 1);
  }
  .nopass{
    color: rgba(255, 120, 105, 1);
    background-color: rgba(255, 204, 204, 0.64);
  }
}
</style>
